<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>闭包应用场景</h2>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
<script>
    //1.for循环+数组
    let arr=[]
    for(var i=0;i<6;i++) {
       (function(i) {
        arr[i]=function() {
            return i;
        }
       })(i)
    }

    // console.log(arr[0]())
    // console.log(arr[1]())
    // console.log(arr[2]())

    //2.for+定时器
    // for(var i=0;i<5;i++) {
    //    (function(i) {
    //     setTimeout(function() {
    //         console.log(i)
    //     },i*1000)
    //    })(i)
    // }

    //3.封装组件
    const tools=(function(){
        let i=0;
        const add=(n=1)=>{
            i+=n;
          //  return i;
        }
        const jian=(n=1)=>{
            i-=n;
          //  return i;
        }

        const getValue=()=>{
            return i;
        }
        return {
            add,
            getValue
        }
    })()

   // console.log(tools)
//    tools.add(10)
//    tools.add(10)
//    tools.add(10)
//    tools.add(10)
//    console.log(tools.getValue())

   //4.dom操作
   const lis=document.querySelectorAll('.list>li')
   console.log(lis.length)

   for(var i=0;i<lis.length;i++){
    (function(i) {
        lis[i].onclick=function() {
        console.log(i)
    }
    })(i)
   }

</script>
</html>